<!-- 区域选择联动逻辑测试页面 -->
<template>
  <view class="min-h-screen bg-gray-50 p-6">
    <!-- 页面标题 -->
    <view class="mb-8">
      <text class="text-[36rpx] font-bold text-gray-900 text-center">区域选择联动逻辑测试</text>
    </view>

    <!-- 区域选择 -->
    <RegionSelector v-model="regionLevel" @change="handleRegionChange" />

    <!-- 市区选择 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mb-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4 flex items-center">
        <IconFont name="location" class="text-blue-500 mr-3" />
        <text>服务区域</text>
      </view>
      
      <view class="mb-4">
        <text class="text-[28rpx] font-medium text-gray-700 block mb-3">选择服务区域</text>
        <view class="text-[24rpx] text-gray-500 mb-4">
          <!-- 根据区域选择级别显示不同的说明文字 -->
          <text v-if="regionLevel === 'city'">
            选择任务执行的具体省市，这将影响任务的服务范围和信息费用
          </text>
          <text v-else-if="regionLevel === 'province'">
            选择任务执行的省份，这将影响任务的服务范围和信息费用
          </text>
          <text v-else-if="regionLevel === 'nation'">
            全国范围，无需选择具体区域
          </text>
        </view>
        
        <!-- 市区选择器 -->
        <view :class="{ 'opacity-50 pointer-events-none': isCityPickerDisabled }">
          <CityPicker
            :mode="cityPickerMode"
            :placeholder="cityPickerPlaceholder"
            :title="cityPickerTitle"
            :disabled="isCityPickerDisabled"
            @confirm="handleRegionConfirm"
            @cancel="handleRegionCancel"
          />
        </view>
        
        <!-- 全国范围时的特殊显示 -->
        <view v-if="regionLevel === 'nation'" class="mt-4 p-4 bg-green-50 rounded-xl border border-green-200">
          <view class="flex items-center">
            <IconFont name="check-circle" class="text-green-600 mr-2" size="24rpx" />
            <text class="text-[26rpx] text-green-800 font-medium">服务范围：</text>
          </view>
          <text class="text-[28rpx] text-green-900 mt-2 block">
            全国范围
          </text>
        </view>
        
        <!-- 显示已选择的区域 -->
        <view v-else-if="region" class="mt-4 p-4 bg-blue-50 rounded-xl border border-blue-200">
          <view class="flex items-center">
            <IconFont name="check-circle" class="text-blue-600 mr-2" size="24rpx" />
            <text class="text-[26rpx] text-blue-800 font-medium">已选择区域：</text>
          </view>
          <text class="text-[28rpx] text-blue-900 mt-2 block">
            {{ regionDisplayText }}
          </text>
        </view>
      </view>
    </view>

    <!-- 调试信息 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">调试信息</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex justify-between">
          <text>区域选择级别：</text>
          <text class="font-medium">{{ regionLevel }}</text>
        </view>
        <view class="flex justify-between">
          <text>市区选择器模式：</text>
          <text class="font-medium">{{ cityPickerMode }}</text>
        </view>
        <view class="flex justify-between">
          <text>是否禁用：</text>
          <text class="font-medium">{{ isCityPickerDisabled ? '是' : '否' }}</text>
        </view>
        <view class="flex justify-between">
          <text>占位符文本：</text>
          <text class="font-medium">{{ cityPickerPlaceholder }}</text>
        </view>
        <view class="flex justify-between">
          <text>选择结果：</text>
          <text class="font-medium">{{ region ? JSON.stringify(region) : '未选择' }}</text>
        </view>
      </view>
    </view>

    <!-- 测试说明 -->
    <view class="bg-white rounded-2xl p-6 shadow-sm mt-6">
      <view class="text-[32rpx] font-semibold text-gray-900 mb-4">测试说明</view>
      <view class="space-y-3 text-[24rpx] text-gray-700">
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            1
          </view>
          <text class="flex-1">选择"市级"：服务区域可以选择省份和城市</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            2
          </view>
          <text class="flex-1">选择"省级"：服务区域只能选择省份</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            3
          </view>
          <text class="flex-1">选择"全国"：服务区域不可选择，显示"全国范围"</text>
        </view>
        <view class="flex items-start">
          <view class="w-[24rpx] h-[24rpx] bg-blue-500 text-white rounded-full flex items-center justify-center text-[16rpx] font-bold mr-3 mt-1 flex-shrink-0">
            4
          </view>
          <text class="flex-1">切换区域选择时，会清空之前选择的市区信息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'
import CityPicker from './CityPicker.vue'
import RegionSelector from './RegionSelector.vue'

/**
 * 选择结果类型定义
 */
interface SelectionResult {
  province?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
  city?: {
    code: string
    name: string
    level: number
    parentCode?: string
  }
}

// 响应式数据
const regionLevel = ref("city")
const region = ref<SelectionResult | null>(null)

// 根据区域选择级别确定市区选择器的模式
const cityPickerMode = computed(() => {
  switch (regionLevel.value) {
    case 'city':
      return 'city' // 市级：可以选择省市
    case 'province':
      return 'province' // 省级：只能选择省份
    case 'nation':
      return 'province' // 全国：不可选择，但设置为province模式
    default:
      return 'city'
  }
})

// 根据区域选择级别确定是否禁用市区选择器
const isCityPickerDisabled = computed(() => {
  return regionLevel.value === 'nation' // 全国时禁用
})

// 选中的区域显示文本
const regionDisplayText = computed(() => {
  if (!region.value) {
    if (regionLevel.value === 'nation') {
      return "全国范围"
    }
    return "请选择服务区域"
  }
  
  if (region.value.city) {
    return `${region.value.province?.name} ${region.value.city.name}`
  }
  
  if (region.value.province) {
    return region.value.province.name
  }
  
  return "请选择服务区域"
})

// 市区选择器的占位符文本
const cityPickerPlaceholder = computed(() => {
  switch (regionLevel.value) {
    case 'city':
      return "请选择服务区域（省市）"
    case 'province':
      return "请选择服务区域（省份）"
    case 'nation':
      return "全国范围"
    default:
      return "请选择服务区域"
  }
})

// 市区选择器的标题文本
const cityPickerTitle = computed(() => {
  switch (regionLevel.value) {
    case 'city':
      return "选择服务区域（省市）"
    case 'province':
      return "选择服务区域（省份）"
    case 'nation':
      return "全国范围"
    default:
      return "选择服务区域"
  }
})

/**
 * 处理区域选择变化
 * @param data 区域选择数据
 */
const handleRegionChange = (data: { value: string; fee: number; range: string }) => {
  // 当区域选择改变时，清空之前选择的市区信息
  region.value = null
  
  console.log('区域选择已改变:', data.value, '清空市区选择')
}

/**
 * 处理市区选择确认
 * @param result 选择结果
 */
const handleRegionConfirm = (result: SelectionResult) => {
  region.value = result
  
  console.log('选择的区域:', result)
  
  // 显示选择结果提示
  let message = ''
  if (result.city) {
    message = `已选择：${result.province?.name} ${result.city.name}`
  } else if (result.province) {
    message = `已选择：${result.province.name}`
  }
  
  if (message) {
    Taro.showToast({
      title: message,
      icon: 'success',
      duration: 2000
    })
  }
}

/**
 * 处理市区选择取消
 */
const handleRegionCancel = () => {
  console.log('取消区域选择')
  Taro.showToast({
    title: '已取消选择',
    icon: 'none',
    duration: 1500
  })
}
</script>
